<script setup>
import {toRefs, reactive, toRef} from "vue";

let stateSingle = reactive({
  count:0,
})

let stateSingle2 = reactive({
  count2:0,
})

let stateSingle3 = reactive({
  count3:0,
  message:'hi stateSingle3'
})

// 转成ref 相当于ref(0)
let {count2} = toRefs(stateSingle2);

let {count3, message} = toRefs(stateSingle3);

// todo: toRef bug
// let stateSingle4 = reactive({
//   count4:0,
//   message:'hi stateSingle4'
// })
// let {count4} = toRef(stateSingle4 , 'count4');
// let {message} = toRef(stateSingle4 , 'message');
// console.log(count4)

let handleChange = () =>{
  stateSingle.count ++;
  count2.value++;
  count3.value+=1;
  // count4.value++;
}


</script>

<template>
  <div>
    <button @click="handleChange">点击</button>
    <br>
    stateSingle.count: {{ stateSingle.count }}
    <br>
    stateSingle2:{{count2}}
    <br>
    stateSingle3:{{count3}},{{message}}
    <br>
<!--    stateSingle4:{{count4}}-->

  </div>
</template>

<style lang="scss" scoped>

</style>